<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="dialogForm" @close="cancel">
      <el-row>
        <el-col :span="6"> 【题型】:{{ form.questionType | ctitle }}</el-col>
        <el-col :span="6">【编号】:{{ form.id }}</el-col>
        <el-col :span="6"> 【难度】:{{ form.difficulty | questionDiffer }}</el-col>
        <el-col :span="6"> 【标签】:{{ form.tags }}</el-col>
      </el-row>
      <el-row class="elsty">
        <el-col :span="6">【学科】:{{ form.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ form.directoryName }}</el-col>
        <el-col :span="6">【方向】:{{ form.direction }}</el-col>
      </el-row>
      <hr />

      <!-- 题干 -->
      <el-row>
        <el-col :span="24">
          【题干】：
        </el-col>
      </el-row>
      <h3>{{ form.question | html2Text }}</h3>
      <!-- 单选题 -->
      <!-- 单选类型 -->
      <div v-if="form.questionType === '1'">
        <div class="dadradio">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <el-radio v-for="(item, index) in form.options" :key="index" :label="1" :value="item.isRight">{{
            item.title
          }}</el-radio>
        </div>
      </div>
      <!-- 复选框 -->
      <div v-if="form.questionType === '2'" class="checkbox">
        <el-checkbox v-for="(item, index) in form.options" :key="index" :value="item.isRight ? true : false">{{
          item.title
        }}</el-checkbox>
      </div>
      <div v-if="form.questionType === '3'"></div>
      <hr />
      <!-- 参考答案 -->
      <el-row>
        <el-col class="answer" :span="4">
          【参考答案】：
        </el-col>
        <div>
          <el-button type="danger" @click="gotoShowVideo">视频答案预览</el-button>
          <div ref="video" class="videobox">
            <video class="sonbox" :src="form.videoURL" type="viedo/mp4" autoplay loop controls></video>
          </div>
        </div>
      </el-row>
      <hr />
      <el-row>
        <el-col class="answer" :span="4">
          【答案解析】：
        </el-col>
        <el-col class="answer" :span="20">
          {{ form.answer | html2Text }}
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col class="answer" :span="4">
          【题目备注】：
        </el-col>
        <el-col class="answer" :span="20">
          {{ form.remarks }}
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { questionType } from '@/api/hmmm/constants.js'
import { detail } from '@/api/hmmm/questions.js'
export default {
  props: ['dialogForm'],
  data () {
    return {
      // 试题类型
      questionType: questionType,
      // 试题预览弹框表格信息
      form: {}
    }
  },
  methods: {
    // 点击取消关闭弹框
    cancel () {
      this.$emit('update:dialogForm', false)
    },
    // 带路径参数获取详情列表
    getdialogForm (id) {
      this.$nextTick(async () => {
        this.$refs.video.style.display = 'none'
        const res = await detail({ id })
        this.form = res.data
      })
    },
    // 点击视频答案显示视频
    gotoShowVideo () {
      this.$refs.video.style.display = 'block'
    }
  }
}
</script>

<style scoped lang="scss">
.elsty {
  margin: 20px 0;
}
h3 {
  color: #0d0dff;
  font-weight: 400;
}
.dadradio {
  display: flex;
  flex-direction: column;
  .el-radio {
    margin-bottom: 15px;
  }
}
.answer {
  line-height: 40px;
  margin-right: -20px;
}
.checkbox {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    margin-bottom: 15px;
  }
}
.videobox {
  display: none;
  width: 400px;
  height: 300px;
  // border: 1px solid #ccc;
  .sonbox {
    width: 100%;
    height: 100%;
  }
}
</style>
